/* 组件懒加载 */
import React, { Component } from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const asyncComponent = (importComponent) => {
  return class extends Component {
    constructor() {
      super();
      this.state = {
        component: null,
      };
    }

    componentDidMount() {
      importComponent().then((cmp) => {
        this.setState({ component: cmp.default });
      });
    }

    render() {
      const C = this.state.component;
      return C ? (
        <C {...this.props} />
      ) : (
        <div style={{ textAlign: 'center', paddingTop: 150 }}>
          <Spin indicator={antIcon} tip="加载中" />
        </div>
      );
    }
  };
};

export default asyncComponent;
